<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>产品分类</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
	<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
	<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
	<meta HTTP-EQUIV="expires" CONTENT="0">
	<link rel="stylesheet" th:href="@{'/static/css/common_1.css?v=' + ${timstamp}}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"  media="all">
	<link rel="stylesheet" th:href="@{/static/picbox/picbox.css}"  media="all">
	<script th:src="@{/static/js/jquery-2.1.1.min.js}" charset="utf-8"></script>
	<script th:src="@{/static/picbox/picbox.js}" charset="utf-8"></script>
	<script th:src="@{/static/layer/layer.js}" charset="utf-8"></script>
	<!--layui会引起什么乱子？？？？-->
	<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body class="grey-body">
<div th:replace="website/template/top.html"></div>
<div class="content-page" id="app" v-cloak>
	<div class="bread-crumb">
		<a href="/web/index"><i class="layui-icon layui-icon-home"></i> 分店首页</a>
		<span class="cur">分类浏览</span>
	</div>
	<div class="item-list product">
		<a class="box" v-for="product in list" :href="'/web/product/info?id=' + product.id">
			<img class="own" src="/static/img/icon_sell.png" alt="" v-if="product.own">
			<div class="title">{{product.title}}</div>
			<div class="picture">
				<img :src="product.cover">
			</div>
			<div class="price">零售价￥{{product.guidePrice}}</div>
			<div class="button">
				<img src="/static/img/arrow-right2.svg" alt="">
			</div>
		</a>
	</div>
	<div style="height:100px;"></div>
	<!--购物车-->
	<div th:replace="website/template/cart.html"></div>
</div>

<script src="/static/js/cart.js"></script>
<script th:src="@{/static/js/vue.js}"></script>
<script th:inline="javascript">
	const cid = [[${cid}]];
    var layerIndex
	const vm = new Vue({
		el: '#app'
		,mixins:[mixinsCommon],
		data: {
            imgUriPrefix: '/static',
			list: [],
            page:1,
            limit:6
		},
        created(){
            this.fetchData()
        },
        methods:{
            fetchData (){
                console.log('读取数据')
                layerIndex = layer.load(0, {
                    // shade: [0,'#fff'] //0.1透明度的白色背景
                });
                $.ajax({
                    url:'/web/productList',
                    data:{page: this.page, limit: this.limit, categoryId: cid}
                }).done((res)=>{
                    if(res.data.length>0){
                        this.list = this.list.concat(res.data)
                        this.page += 1 //页码加1
                    }else{
                        layer.msg('已经到底了！')
                    }
                }).always(function(){
                    setTimeout(()=>{
                        layer.close(layerIndex)
                    },500)
                })
            }
        }
	})

    let timer = null
    $(document).ready(function (){
        let wh = $(window).height() //窗口高度
        let _elheight =0 //整个容器的高
        let _limit = 150; //边界值

        $(document).scroll(function(){
            clearTimeout(timer)
            timer = setTimeout(()=>{
                _elheight = $(this).height() //重新取值，因为列表数据是在vue里面执行的
                let _scrollTop = $(this).scrollTop()
                console.log('滚动了,容器高是：',_elheight,'，滚动了：',_scrollTop)

                //滚动的高度 + 窗口高度 + 边界值，大于容器高度，就是滚动到底部
                if(wh + _scrollTop + _limit >= _elheight){
                    console.log("滚动条到底部了",layer);
                    vm.fetchData()
                }
            },500)
        });
    });

</script>
</body>
</html>